<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>匿名吐槽</title>
    <script src="/javascripts/jquery-2.1.4.min.js"></script>
</head>
<style>
    body {
        padding: 20px;
        max-width: 750px;
        margin: auto;
    }

    .input {
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        width: 100%;
    }

    .btn {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #FFF;
        border: 1px solid #DCDFE6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }

    .row {
        margin-bottom: 30px;
    }

    .row .label {
        margin-bottom: 10px;
    }
    .error {
        color: red;
        margin: 10px;
        display: none;
    }

    .list-item {
        border-bottom: solid 0.5px #606266;
        margin: 10px 0px ;
        padding: 10px 10px 30px 10px;
    }
    .list-item:last-of-type{
        border-bottom:none;
    }
    .list-item .item-label {
        margin-bottom: 10px;
    }
</style>

<body>
    <h1 style="text-align: center;">匿名吐槽</h1>
    <span>开源地址：<a target="_blank" href="https://gitee.com/wudx/ridicule">https://gitee.com/wudx/ridicule</a></span>
    <hr />
    <div class="row">
        <div class="label">说出你想说的:</div>
        <div>
            <textarea rows="3" class="input" name="content"></textarea>
        </div>
        <div class="error">描述不能过于简单</div>
        <div class="btn js_save">吐槽</div>
    </div>

    <div style="text-align: right;">本月记录：<%=list.length %>条</div>
    <div>
        <!-- 输出列表  -->
        <% for(var i in list){ %>
            <div class="list-item">
                <div class="item-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 日期：<%=list[i].date %></div>
                <div>吐槽内容：<%=list[i].content %></div>
            </div>
        <% } %>
    </div>
</body>
<script>

    var group = '<%=group %>';

    $(".js_save").click(function(){
        var content = $("[name=content]").val();
        console.log(content);
        if(content.length <= 3){
            $(".error").show();
        } else {
            $(".error").hide();

            $.post("save", {content : content, group: group}, function(rs){
                location.reload();
            },'json');

        }
    });

</script>

</html>